<template>
  <div>
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>全部图文</span>
  </div>
  <div class="text item">
    <el-form  label-width="100px" :model="searchForm">
  <el-form-item label="文章状态：">
  <el-radio v-model="searchForm.status" label="">全部</el-radio>
  <el-radio v-model="searchForm.status" label="0">草稿</el-radio>
  <el-radio v-model="searchForm.status" label="1">待审核</el-radio>
  <el-radio v-model="searchForm.status" label="2">审核通过</el-radio>
  <el-radio v-model="searchForm.status" label="3">审核失败</el-radio>
  <el-radio v-model="searchForm.status" label="4">已删除</el-radio>
<!-- :label-position="labelPosition" -->
  </el-form-item>
  <el-form-item label="频道列表：">
    <template>
  <el-select v-model="searchForm.channel_id" clearable placeholder="请选择">
    <el-option
      v-for="item in channelList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

  </el-form-item>
  <el-form-item label="时间选择：">
     <el-date-picker
      v-model="timetotime"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"

      value-format="yyyy-MM-dd"
      >
    </el-date-picker>

  </el-form-item>

</el-form>
<!-- 文章内容卡片区域 -->
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>共找到 {{tot}} 条记录</span>

  </div>
 <template>
    <el-table
      :data="articleList"
      style="width: 100%">
      <!-- prop是根据数据属性定义当前名称字段 -->
      <!-- 可以规划宽度但是尽量不要使用width -->
      <el-table-column
        label="图标"
        prop="cover">
      <img :src="stData.row.cover.images[0]" slot-scope="stData" alt="没有图标"
       width="150" height="100">
      </el-table-column>
<el-table-column
        label="标题"
        prop="title">

      </el-table-column>

        <el-table-column
        label="状态"
        prop="status"
        > <template slot-scope="stData">
         <el-tag v-if='stData.row.status===0'  effect="dark" type=''>草稿</el-tag>
         <el-tag v-else-if='stData.row.status===1' effect="dark" type='info'>待审核</el-tag>
         <el-tag v-else-if='stData.row.status===2' effect="dark" type='success'>审核通过</el-tag>
         <el-tag v-else-if='stData.row.status===3' effect="dark" type='warning'>审核失败</el-tag>
         <el-tag v-else effect="dark" type='danger'>已删除</el-tag>
  </template>
      </el-table-column>

      <el-table-column
        label="发表时间"
        prop="pubdate"
        >
      </el-table-column>
         <el-table-column
        label="操作"
        >
         <el-button type="primary" size="mini" round>修改</el-button>
      <el-button type="danger" size="mini" round>删除</el-button>
      </el-table-column>

    </el-table>
  </template>
</el-card>

  </div>
</el-card>
</div>
</template>

<script>
export default {
  name: 'ArticleList',
  // 监听器，可以设置监听某一数据的变化并根据其变化做出处理
  watch: {
    // 一般来说监听器对于this可以调用的属性都可以进行监听
    timetotime (newval) {
      // 将newval中的值拆分为begin_pubdate和end_pubdate里边
      if (newval) {
        this.searchForm.end_pubdate = newval[1]
        this.searchForm.begin_pubdate = newval[0]
      } else {
        this.searchForm.end_pubdate = ''
        this.searchForm.begin_pubdate = ''
      }
    }

  },
  created () {
    this.getChannelList()
    this.getArticlList()
  },

  data () {
    return {
      // 下拉框死数据
      channelList: [
        { id: 201, name: 'ios' },
        { id: 202, name: 'andriod' },
        { id: 203, name: '塞班' }
      ],
      // 存储文章数据
      articleList: [],
      // 控制对齐方式
      labelPosition: 'right',
      // 声明变量储存日期数据
      timetotime: [],
      // 表单元素获取
      searchForm: {
        // 单选框值
        status: '', // 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部
        channel_id: '',
        begin_pubdate: '',
        end_pubdate: ''

      },
      // 文章总纪录条数
      tot: ''
    }
  },
  component: {
  },
  methods: {
    getChannelList () {
      // 这是通过mian文件中原型继承所定义的$http
      this.$http.get('/channels')
        .then(result => {
          if (result.data.message === 'OK') {
            // 将服务器端的列表赋值给存储列表的变量
            this.channelList = result.data.data.channels
          }
        })
    },
    // 获取文章信息的函数
    getArticlList () {
      this.$http.get('/articles')
        .then(result => {
          console.log(result)
          this.articleList = result.data.data.results
          this.tot = result.data.data.total_count
        })
    }
  }

}
</script>

<style lang="less" scoped>
</style>
